<template>
	<view class="main">
		<view class="box" v-for="(item) in key_count" :key="item.id">
			<view class="title">
				<text class="title_text">关键字:</text>				
				<input class="input" type="text"  v-model="item.key" />
				
			</view>
			<view class="inputs">
				<text class="title_text">字符:</text>
				<input class="input" type="text" v-model="item.name" />
				
			</view>
		</view>
		<view class="button">
			<button @click="add_other">增加</button>
			<button style="margin-top: 5px;" @click="save_other">保存</button>
		</view>
		<uni-popup ref="message" type="message">
						<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>   

    export default {
        data() {
            return {
				key_count:[{"key":"异形","name":"Y"}],
				msgType:null,
				messageText:null,



            };
        },
        onShow(option) {
			let that = this
			uni.getStorage({
				key: 'other_data',
				success: function (res) {
					console.log(res);
					that.key_count = res.data
				},
				
			});

        },

        methods: {
			add_other(){
				this.key_count.push({"key":"关键字","name":"Y"})
			},
			
			save_other(){
				let that = this
				console.log(this.key_count);
				for (let i = this.key_count.length - 1; i >= 0; i--) {  //删除key为空的项
				  if (this.key_count[i].key === "" || this.key_count[i].key == "关键字") {
				    this.key_count.splice(i, 1);
				  }
				}
				uni.setStorage({
					key: "other_data",
					data: that.key_count,
					success: function () {
						console.log('success');
						that.msgType = "success"
						that.messageText = `特殊板件定义保存成功`
						that.$refs.message.open()
					},
					fail:function(){
						console.log("fali");
					}
				});
			}

            //获取数据

        }
    }
</script>

<style lang="scss" scoped>
	.main{
		display: flex;
		flex-wrap: wrap;
		
	}
	.box{
		border: 1px solid rgba(222, 230, 191, 1.0);
		width: 200px;
		height: 100px;
		margin: 20px;
		background-color: rgba(241, 241, 241, 1.0);
		
	}
	.button{
		margin-top: 22px;
	}
	.title{
		display: flex;		
		margin: 5px;
	}
	.title_text{
		flex: 1;
		border: 1px solid rgba(248, 248, 248, 1.0);
		text-align: left;
		margin: 5px;
	}
	.inputs{
		display: flex;
		margin: 5px;
	}
	.input{
		flex: 1;
		border: 1px solid rgba(134, 134, 134, 1.0);
		margin: 5px;
	}
   
</style>